<template>
	<view>
		<!-- 多选框组 -->
		<u-checkbox-group :wrap="true" @change="checkGoods" class="ck_box">
			
			<!-- 商品卡片 -->
			<u-card :show-head="false" box-shadow="rgba(0,0,0,.1) 10rpx 8rpx 20rpx " padding="15"
				v-for="data in goodsList"
				:key="data.id"
				margin="12rpx"
			
			>	
			
				<view slot="body">
					<navigator :url="'/pages/goods/goods?id='+data.id">
					<view class="goods_item u-flex u-row-between">
						<view class="left_box">
							<u-checkbox 
								shape="circle"
								size="40"
								:disabled="false"
								v-model="data.is_checked"
								
							></u-checkbox>
						</view>
						<view class="u-flex u-row-between right-box u-flex-1">
							<!-- 商品图片 -->
							<view class="img_itme">
								<image :src="data.goods.cover_url" mode="widthFix" class="goods_img"></image>
							</view>
							<!-- 商品内容 -->
							<view class="u-flex-1 content_item">
								<view class="goods_title">{{data.goods.title}}</view>
								<view class="goods_mail">{{data.goods.description}}</view>
								<view class="u-flex u-row-between">
									<view class="goods_price">￥{{data.goods.price}}</view>
									<view class="goods_num">
										<u-number-box 
											v-model="data.num"
											:input-width="60"
											:input-height="55"
											:disabled-input='true'
											@minus="numChange(data.num,data.id,data.goods.stock)"
											@plus="numChange(data.num,data.id,data.goods.stock)"
										
										></u-number-box>
									</view>
									<view class="goods_del" @tap.stop="delCar(data.id)">
										<u-icon name="trash" size="35" color="red"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
					</navigator>
				</view>
				
			</u-card>
			<!-- 底栏 -->
			<view class="foot u-flex u-row-between">
				<view class="all_box u-flex ">
					<view>
						<u-checkbox
							shape="circle"
							size="40"
							:disabled="false"
							@change="checkAll"
							v-model="allChecked"
						></u-checkbox>
					</view>
					
					<text class="u-p-l-20">全选</text>
				</view>
				<view class="right-box u-flex-1 u-flex u-row-around u-p-l-30">
					<view>
						<text class="sum_title">合计:</text>
						<text class="sum_price">￥{{sumPrice}}</text>
					</view>
					<view >
						<u-button type="error" shape="circle" size="medium">去结算</u-button>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		
	</view>
</template>

<script>
	export default {
		onShow(){
			this.loadData()
		},
		async onLoad() {
			this.loadData()
		},
		
		data() {
			return {
				carIdList:[],
				goodsList: [],
				num:0,
				allChecked:false
			};
		},
		methods:{
			async numChange(num,car_id,kucun){
				console.log(kucun);
				//商品数量更改
				if(num > kucun){
					this.$u.toast("商品库存不足")
					return
				}
				if(num === 0) {
					this.$u.toast("商品数量不能为0")
					return
				}
				const params = {
					num:num
				}
				await this.$u.api.checkShopNum(car_id,params)
				this.loadData()
			},
			async delCar(car_id){
				//取消购物车
				await this.$u.api.delShopCar(car_id)
				this.loadData()
			},
			async loadData(){
				//加载数据
				const {data} = await this.$u.api.getShopCarList();
				this.goodsList = data
				this.goodsList.map(goodsCar =>{
					goodsCar.is_checked = Boolean(goodsCar.is_checked)
				})
				this.getCheckedCarID()
				this.isCheckAll()
				console.log(this.goodsList);
			},
			async checkGoods(){
				//选中购物车
				this.getCheckedCarID()
				const params = {
					cart_ids:this.carIdList
				}
				await this.$u.api.checkedCar(params)
				this.loadData()
				
			},
			getCheckedCarID(){
				//获取被选中的购物车id
				const carIdList = []
				this.goodsList.map(goodsCar =>{
					goodsCar.is_checked && carIdList.push(goodsCar.id)
				})
				this.carIdList = carIdList 
				
			},
			checkAll(){
				this.goodsList.map(goodsCar =>{
					goodsCar.is_checked = !goodsCar.is_checked
				})
				this.checkGoods()
			},
			isCheckAll(){
				if(this.goodsList.length === this.carIdList.length) this.allChecked = true
				else this.allChecked = false
			}
			
		},
		computed:{
			sumPrice:function(){
				//计算总价
				let sum = 0
				this.goodsList.map(goodsCar =>{
					if(this.carIdList.includes(goodsCar.id)){
						sum += goodsCar.goods.price*goodsCar.num
					}
				})
				return sum
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods_item{
		.left_box{
			padding: 10rpx;
		}
		.right-box{
			padding: 10rpx;
			.content_item{
				
				padding: 10rpx;
				.goods_title{
					font-size: 35rpx;
				}
				.goods_mail{
					font-size: 25rpx;
					color: #82848A;
					padding-top: 10rpx;
					padding-bottom: 30rpx;
				}
				.goods_price{
					color: red;
					font-size: 30rpx;
				}
			}
			.img_itme{
				padding: 10rpx;
				.goods_img{
					width: 190rpx;
					height: 190rpx;
				}
			}
			
		}
		
	}
	.all_box{padding: 50rpx;}
	.u-checkbox{
		display: block !important;
	}

	.foot{
		position: fixed;
		bottom: 40px;
		width: 100%;
	}
	.ck_box{
		display: block;
	}
	.sum_price{
		color: red;
		font-size: 40rpx;
		font-weight: 900;
		padding-left: 10rpx;
	}
	.sum_title{
		
		font-size: 35rpx;
		font-weight: 900;
		
	}
</style>
